<template>
  <div class="search-container">
    <el-input
        v-model="searchQuery"
        placeholder="搜索"
        prefix-icon="el-icon-search"
        suffix-icon="el-icon-circle-close"
        clearable
        @clear="handleClear"
        class="search-input"
    ></el-input>
    <el-button
        type="primary"
        class="search-button"
        @click="handleSearch"
    >
      搜索
    </el-button>
  </div>
  <section class="video-list">
    <Card
        v-for="video in paginatedVideos"
        :key="video.resourceId"
        :resourceId="video.resourceId"
        @click="playVideo(video.resourceId)"
    />
  </section>

  <div class="pagination-info">
    <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        :small="true"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { resourceApi } from '@/api/resourceApi';
import Card from "@/components/CardTwo.vue";

export default {
  name:"SearchContainer",
  components: { Card },
  data() {
    return {
      searchQuery: '',
      paginationData: {
        pageNum: 1, // 当前页数
        pageSize: 8, // 每页显示的数量
      },
      total: 0, // 视频总数
      videos: [] // 存储所有视频的搜索结果
    };
  },
  computed: {
    paginatedVideos() {
      const start = (this.paginationData.pageNum - 1) * this.paginationData.pageSize;
      const end = start + this.paginationData.pageSize;
      return this.videos.slice(start, end); // 返回当前页的视频数据
    }
  },
  methods: {
    async handleSearch() {
      try {
        const response = await resourceApi.es(this.searchQuery, 1, 300); // 拉取更多数据以支持分页
        this.videos = response.resources; // 更新视频列表
        this.total = this.videos.length; // 更新视频总数
        this.paginationData.pageNum = 1; // 搜索后重置为第一页
        console.log("搜索内容: ", this.searchQuery);
        console.log("搜索结果: ", this.videos);
      } catch (error) {
        console.error("搜索视频时出错:", error);
      }
    },
    handleClear() {
      this.searchQuery = '';
      this.videos = []; // 清空视频列表
      this.total = 0; // 清空总数
      this.paginationData.pageNum = 1; // 清空搜索框后重置分页
    },
    playVideo(id) {
      console.log("播放视频 ID:", id);
      this.$router.push({ name: 'videoPlayer', params: {resourceId: id}});
    },
    handleSizeChange(newSize) {
      this.paginationData.pageSize = newSize;
      this.paginationData.pageNum = 1; // 重置为第一页
    },
    handleCurrentChange(newPage) {
      this.paginationData.pageNum = newPage; // 更新当前页
    }
  },
  mounted() {
    // 在组件挂载时执行的逻辑
  }
};
</script>

<style scoped>
.search-container {
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
  margin-right: 10px;
  height: 40px;
  border-radius: 20px;
  padding: 0 10px;
  font-size: 16px;
}

.search-button {
  border-radius: 20px;
  padding: 10px 20px;
  height: 40px;
  font-size: 14px;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.pagination-info {
  text-align: center;
}
</style>
